<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="d3-tip.css">
    <style>
        *{
            margin:0;
            padding: 0;
        }
        body{
            padding-left:100px;
        }
        .box{
            position: absolute;
            left:100px;
            top: 100px;
            width: 600px;
            height: 600px;
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
    <script src="d3.min.js"></script>
    <!-- <script src="https://d3js.org/d3.v7.min.js"></script> -->
    <script src="d3-tip.js"></script>
    <script>
        
        const svg = d3.select('body').append('svg');
        svg.attr('width',800);
        svg.attr('height',800);
        svg.style('border','2px solid #ccc');


        let x = d3.scaleLinear([10,20],[100,700]).nice();

        const xAxis = d3.axisBottom(x);

        const g = svg.append('g')
            .attr('transform','translate(0,500)') 
        
       g.call(xAxis);     
    
    //范围不变， 值域变
    //    const zoom = d3.zoom()
    //         .scaleExtent([0.5,2])
    //         .translateExtent([[100,100],[700,700]])
    //         .extent([[100,100],[700,700]])
    //         .on('zoom',e=>{
    //             g.transition()
    //                 .duration(1000)
    //                 .call(xAxis.scale(e.transform.rescaleX(x)))
    //         })


    //值域不变，范围变
        const zoom = d3.zoom()
            .scaleExtent([0.5,2])
            .translateExtent([[0,0],[800,0]])
            .extent([[0,0],[800,0]])
            .on('zoom',e=>{
                console.log(e.transform);
                const range = [100,700].map(d=>e.transform.applyX(d))
                console.log(range);
                x.range(range);
                g.transition()
                    .duration(1000)
                    .call(xAxis)
            })
        svg.call(zoom);

    </script>
</body>
</html>